<template>
  <div class="main" @click="closeDialog">
    <div class="main-mask"></div>
    <div class="dialog" @click.stop="clickDialog">
      <el-button
        type="button"
        aria-label="Close"
        class="dialog-close"
        icon="el-icon-close"
        @click="closeDialog"
      ></el-button>
      <div class="types">
        <div
          v-for="(item, index) in itemList"
          class="type"
          :class="{
            'active-type': index == selectType,
            'left-type': index == 0,
          }"
          :key="index"
          @click="chooseType(index)"
        >
          <div>{{ item.name }}</div>
          <div class="remark" v-if="index == 1">({{ item.remark }})</div>
        </div>
      </div>

      <div class="benefit" v-if="selectType == 0">
        <div class="benefit-item">
          <i class="el-icon-download"></i>
          <div>免费下载300篇/月</div>
        </div>
        <div class="benefit-item">
          <i class="el-icon-reading"></i>
          <div>免费阅读1500篇/月</div>
        </div>
        <div class="benefit-item">
          <i class="el-icon-search"></i>
          <div>无限制搜索</div>
        </div>
        <div class="benefit-item">
          <i class="el-icon-s-data"></i>
          <div>数据图表部分功能</div>
        </div>
        <div class="benefit-item">
          <i class="el-icon-mobile"></i>
          <div>小程序同享</div>
        </div>
        <div class="benefit-item">
          <i class="el-icon-close-notification"></i>
          <div>去广告</div>
        </div>
      </div>
      <div class="benefit" v-else>
        <div class="benefit-item">
          <i class="el-icon-download"></i>
          <div>免费下载600篇/月</div>
        </div>
        <div class="benefit-item">
          <i class="el-icon-reading"></i>
          <div>免费阅读3000篇/月</div>
        </div>
        <div class="benefit-item">
          <i class="el-icon-search"></i>
          <div>无限制搜索</div>
        </div>
        <div class="benefit-item">
          <i class="el-icon-s-data"></i>
          <div>数据图表全部功能</div>
        </div>
        <div class="benefit-item">
          <i class="el-icon-collection"></i>
          <div>合集免费下载</div>
        </div>
        <div class="benefit-item">
          <i class="el-icon-mobile"></i>
          <div>小程序同享</div>
        </div>
      </div>

      <div class="average">
        <div class="av-tag">
          {{ selectType == 1 ? "80%用户的选择" : "即刻解锁海量报告" }}
        </div>
        <div class="av-left">
          <small>￥</small>{{ Math.round(selectItem.price / 12)
          }}<span>/月</span>
        </div>
        <div class="av-sep"></div>
        <div class="av-right">
          <div>年度</div>
          <small>原价 {{ selectItem.org_price }}元</small>
        </div>
        <div class="av-choose">
          <i class="el-icon-check"></i>
        </div>
      </div>

      <div class="pay">
        <div class="channel">
          <div
            class="channel-item"
            :class="{
              'channel-active': selectChannel == 0,
            }"
            style="border-top-left-radius: 10px"
            @click="chooseChannel(0)"
          >
            <img src="@/assets/images/weixin.png" alt="" />
            <div>微信支付</div>
          </div>
          <div
            class="channel-item"
            :class="{
              'channel-active': selectChannel == 1,
            }"
            style="border-bottom-left-radius: 10px"
            @click="chooseChannel(1)"
          >
            <img src="@/assets/images/zhifubao.png" alt="" />
            <div>支付宝支付</div>
          </div>
        </div>
        <div class="qrcode">
          <img
            alt="支付二维码"
            :src="code_uri"
            style="width: 146px; height: 146px"
            :class="needRefresh ? 'invalid' : ''"
            v-show="code_uri"
          />
        </div>
        <div class="pay-right">
          <div class="right-channel">
            {{ selectChannel == 0 ? "微信" : "支付宝" }}扫码支付
          </div>
          <div class="right-price">￥{{ Number(selectItem.price) }}</div>
          <div class="fapiao">如何申请发票？</div>
          <div class="protocol">支付即表示您同意《网站服务协议》</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getVipPrice,
  getWxCode,
  getAlipayCode,
  checkOrder,
  checkAlipayOrder,
} from "@/api/user.js";

export default {
  data() {
    return {
      itemList: [],
      selectType: 1,
      selectChannel: 0,
      needRefresh: false,
      code_uri: "",
      loopId: "",
    };
  },
  props: {},
  computed: {
    selectItem: function () {
      return this.itemList.length
        ? this.itemList[this.selectType]
        : { org_price: 0, price: 0 };
    },
  },
  mounted() {},
  created() {
    this.getVipPriceList();
  },
  destroyed() {
    clearInterval(this.loopId);
  },
  watch: {},
  methods: {
    // 选择会员类型
    chooseType(type) {
      this.selectType = type;
      this.getWxpayCode();
    },
    // 选择购买渠道 0、微信 1、支付宝
    chooseChannel(channel) {
      this.selectChannel = channel;
      this.getPayCode();
    },
    getVipPriceList() {
      getVipPrice().then((res) => {
        this.itemList = res.data.items;
        this.getWxpayCode();
      });
    },
    getPayCode() {
      if (this.selectChannel == 0) {
        this.getWxpayCode();
      } else {
        this.getAlipayCode();
      }
    },
    getWxpayCode() {
      getWxCode({ item_id: this.selectItem.id }).then((res) => {
        this.code_uri = res.data.code_uri;
        let out_trade_no = res.data.out_trade_no;
        clearInterval(this.loopId);
        this.loopId = setInterval(() => {
          let data = {
            out_trade_no: out_trade_no,
          };
          checkOrder(data).then((res) => {
            console.log(res);
            let trade_state = res.data.trade_state;
            if (trade_state == "SUCCESS") {
              clearInterval(this.loopId);
              this.$message.success("支付成功");
              this.$store.dispatch("GetInfo");
              window.location.reload();
            }
          });
        }, 1000);
      });
    },
    getAlipayCode() {
      getAlipayCode({ item_id: this.selectItem.id }).then((res) => {
        this.code_uri = res.data.code_uri;
        let out_trade_no = res.data.out_trade_no;
        clearInterval(this.loopId);
        this.loopId = setInterval(() => {
          let data = {
            out_trade_no: out_trade_no,
          };
          checkAlipayOrder(data).then((res) => {
            console.log(res);
            let trade_state = res.data.trade_state;
            if (trade_state == "TRADE_SUCCESS") {
              clearInterval(this.loopId);
              this.$message.success("支付成功");
              this.$store.dispatch("GetInfo");
              window.location.reload();
            }
          });
        }, 1000);
      });
    },
    closeDialog() {
      this.$emit("closeDialog", false);
    },
    clickDialog() {},
  },
};
</script>

<style lang="less" scoped>
.main {
  z-index: 999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
}

.dialog {
  z-index: 9999;
  width: 900px;
  background: white;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  padding: 30px;
}

.dialog-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 0;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
  transition: color 0.3s;
  width: 30px;
  height: 30px;
}

.types {
  display: flex;
  align-items: center;
  width: 100%;
}

.type {
  width: 50%;
  text-align: center;
  width: 50%;
  height: 40px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  background-color: #f1f8ff;
  color: #1577ff;
  border-radius: 0 5px 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.remark {
  font-size: 12px;
  margin: 2px 0 0 4px;
}

.active-type {
  overflow: hidden;
  position: relative;
  background-color: #2d69f5;
  color: #fff;
}

.left-type {
  border-radius: 5px 0 0 5px;
}

// 权益
.benefit {
  margin-top: 20px;
  width: 100%;
  background-color: #f1f8ff;
  border-radius: 5px;
  padding: 20px 30px;
  font-size: 13px;
  align-items: center;
  display: flex;
  align-items: center;
}

.benefit-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-right: 12px;
}
.benefit-item i {
  margin-right: 3px;
  margin-top: 2px;
}

// 均价信息
.average {
  display: flex;
  width: 60%;
  padding: 60px 30px;
  background-color: #f1f8ff;
  border: 2px solid #2d69f5;
  border-radius: 8px;
  margin-top: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.av-tag {
  top: 0;
  left: 0;
  color: #e36f3f;
  font-size: 14px;
  padding: 0 14px;
  line-height: 30px;
  position: absolute;
  background-color: #fcf0eb;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 8px;
}

.av-choose {
  bottom: 0;
  right: 0;
  color: white;
  font-weight: 600;
  font-size: 28px;
  padding: 0 14px;
  line-height: 30px;
  position: absolute;
  background-color: #2d69f5;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 8px;
}

.av-left {
  display: flex;
  justify-content: center;
  padding-left: 20px;
  color: #ff303f;
  font-size: 40px;
  font-weight: 700;
}

.av-left span {
  font-size: 36px;
}

.av-left small {
  font-size: 18px;
  font-weight: bold;
  margin-top: 22px;
}

.av-sep {
  width: 1px;
  background-color: #ddd;
  height: 56px;
}

.av-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #333;
  font-weight: 600;
  font-size: 20px;
  padding-left: 44px;
}

.av-right small {
  color: #999;
  flex: 0 0 100%;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  text-decoration: line-through;
}

// 支付信息
.pay {
  margin-top: 30px;
  width: 100%;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  display: flex;
}

.channel {
  width: 200px;
  display: flex;
  flex-direction: column;
}

.channel-item {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #333;
  background-color: #e4e4e4;
  cursor: pointer;
}

.channel-item img {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  margin-top: 2px;
}

.channel-item:hover {
  color: #2d69f5;
}

.channel-active {
  background-color: white;
}

.qrcode {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pay-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.right-channel {
  font-size: 22px;
}
.right-price {
  margin-top: 10px;
  color: #ff303f;
  font-size: 36px;
  font-weight: 700;
}
.fapiao {
  margin-top: 10px;
  font-size: 14px;
  color: #222222;
}

.protocol {
  margin-top: 10px;
  color: #999;
  font-size: 14px;
}
</style>
